<template>
    <div class="example-box">
        <div class="describe" v-if="$slots.describe"><slot name="describe"></slot></div>
        <div class="example">
            <div class="slot-content"><slot></slot></div>
            <div class="show-code-btn">
                <el-button link type="primary" size="large" @click="show = !show">{{ show ? '隐藏代码' : '展示代码' }}</el-button>
            </div>
            <pre-code v-show="show" :code="templateCode"></pre-code>
            <div v-if="show" class="show-code-btn">
                <el-button link type="primary" size="large" @click="show = false">隐藏代码</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
    name: 'Example',
    props: {
        // 自定义所有代码串
        templateCode: {
            type: String,
            default: '',
        },
        defaultShow: {
            type: Boolean,
            default: false,
        },
    },
    setup(props) {
        const show = ref(props.defaultShow);
        watch(() => props.defaultShow, (bool) => { show.value = bool; });
        return { show };
    },
};
</script>

<style lang="scss">
.example-box {
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6),
    0 2px 4px 0 rgba(232, 237, 250, .5);
    .describe {
        margin-bottom: 15px;
    }
    .slot-content {
        padding: 20px 10px;
        padding-top: 0;
        background: #fff;
        border-bottom: 1px solid #ebeef5;
    }
    p {
        margin-bottom: 10px;
    }
    .show-code-btn {
        margin: 10px 0;
        margin-bottom: 0;
        text-align: center;
    }
}
</style>
